<template>
	<view class="navbar">
		<view class="fixed-content">
            <!-- 状态栏高度 -->
			<view :style="{'height': geStatusBarHeight + 'px'}"></view>
            <!-- 导航栏高度 -->
			<view class="bar-content" :style="{'height': getNavBarHeight()+'px'}">
				<slot>
					<view class="nav-left" v-if="ctype=='2'" @click="backNave">
						<uni-icons type="left" size="22" color="#333" /> 
					</view>
					<view class="nav-left" v-if="ctype=='3'" @click="backHome">
						<uni-icons type="home-filled" size="25" color="#333" /> 
					</view>
					<view class="nav-title">{{ title }}</view>
				</slot>
			</view>
		</view>
		<!-- 占位高度，状态栏高度+导航栏高度，父组件就不需要计算导航栏高度 -->
		<view :style="{'height': geStatusBarHeight + getNavBarHeight() + 'px'}"></view>
		
		<!-- <view class="puple" v-if="conClick == true" @click="closeMsg">
			<view id="more-oprate" class="nav-box-pick" >
				<view class="tip-trangle-top"></view>
				<view @click.stop>
					<view class="nav-box-click" @click="conGoto">
						<uni-icons type="person" color="#fff" size="14" />
						<view class="nav-back">{{blackText}}</view>
					</view>
				</view>
			</view>
		</view> -->
	</view>
</template>

<script>
	export default {
		name:'Navbar',
		props:{
			title:{
				type: String,
				default:''
			},
			ctype:{
				type: String,
				default:''
			}
		},
		data() {
			return {
			};
		},
		computed:{
			// 获取状态栏高度
			geStatusBarHeight(){
			    return uni.getSystemInfoSync()['statusBarHeight']
			},
		},
        methods: {
            
            // 获取导航栏高度
            getNavBarHeight(){
                // #ifdef MP-WEIXIN
		        let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
                // 导航栏高度 = 胶囊高度 + 上间距 + 下间距 + 微调	（menuButtonInfo.top - uni.getSystemInfoSync()['statusBarHeight'] = 上间距）	        
                let navbarHeight = menuButtonInfo.height + (menuButtonInfo.top - uni.getSystemInfoSync()['statusBarHeight']) * 2 + 2
		        // #endif
		        // #ifdef APP-PLUS || H5
		        let navbarHeight = 44
		        // #endif
		        return navbarHeight
            },
            navigateBack(){
                uni.navigateBack()
            },
			closeMsg(){
				this.conClick = false;
			},
			conGoto(){
				this.$emit('conGoto')
				this.conClick = false;
			},
			backNave(){
				 uni.navigateBack()
			},
			backHome(){
				uni.switchTab({
					url:"/pages/index/index"
				})
			}
        }
	}
</script>

<style lang="scss" scoped>
	.navbar{
		.fixed-content {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			// padding: 0 24rpx;
			z-index: 9999;
			.bar-content{
				display: flex;
				align-items: center;
				position: relative;
				width: 100%;
				.nav-left{
					width: 22px;
					height:22px;
					position: absolute;
					z-index: 2;
					top: 50%;
					margin-left: 25rpx;
					transform: translateY(-50%);
				}
				.nav-title{
					color: #1A1A1A;
					font-size: 34rpx;
					font-weight: 550;
					width: 100%;
					position: absolute;
					top: 50%;
					transform: translateY(-50%);
					text-align: center;
				}
			}
		}
	}
	.puple{
		position: fixed;
		width: 100%;
		height: 100vh;
		z-index: 1997;
		// padding-top: 8px;
	}
	.nav-box-pick{
		position: absolute;
		margin-left:10rpx;
		width: 275rpx;
		/* height: 90rpx;
		line-height: 90rpx; */
		width: 182rpx;
		height: 55rpx;
		line-height: 55rpx;
		background: #555;
		padding-left: 20rpx;
		/*设置圆角*/
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
		color: #fff;
		font-size: 21rpx;
	}
	/*提示框-上三角*/
	.tip-trangle-top {
		position: absolute;
		top: -8px;
		left: 10px;
		width: 0;
		height: 0;
		border-left: 12px solid transparent;
		border-right: 12px solid transparent;
		border-bottom: 12px solid #555;
	}
	.nav-box-click{
		position: absolute;
		display: flex;
		align-items: center;
		width: 100%;
		white-space: nowrap;
		.nav-back{
			margin-left: 5rpx;
			font-size: 21rpx;
		}
	}
</style>